<template>
  <view class="order-wrap">
    <view class="header">
      <!-- <view class="search">
        <view class="search__icon iconfont icon-sousuo"></view>
        <input
          class="search__input"
          type="text"
          :value="name"
          @input="handleSearch"
          @confirm="handleConfirm"
          placeholder="输入商品名"
        />
      </view> -->
      <!-- tab 切换 -->
      <view class="tab-box">
        <u-tabs
          :list="classOrderList"
          :current="current"
          :fontSize="28"
          :isScroll="false"
          bgColor="#ffffff"
          inactiveColor="#999999"
          @change="handleTabChange"
          :active-item-style="{ color: '#333' }"
          :bar-style="{ background: '#FEDD00', borderRadius: '100rpx' }"
        ></u-tabs>
      </view>
    </view>

    <view class="list">
      <view
      class="item" v-for="(item, index) in items" :key="index">
        <view class="merber">
          <image class="merber__img" :src="orderIcon"></image>
          <view class="merber__desc">
            <view class="name">{{ item.buyer_name }}</view>
          </view>
           <view class="merber__time create_time"  >
           下单时间：{{ item.created_at }}
          </view>
          
          <view class="status" >
            {{ item.status | statusValueFilter }}
          </view>
        </view>
        <view class="info" v-for="(img,idx) in item.item_list" :key="idx"  @tap="handleToDetail(item)">
          <image
            class="info__img"
            :src="img.item_pic"
          ></image>
          <view class="info__desc" >
            <view class="name" >{{ img.item_name }}</view>
            <view class="cnt" >{{ item.cnt }}</view>
           <view class="price" >
              <text>¥{{ img.item_price | changeSub }}</text>
              <!-- <text>x{{ item.amount }}</text> -->
            </view>
          </view>
        </view>
        <!-- 倒计时 -->
        <!-- 脱离文档流，数据分离处理 -->
        <view class="count-line">
        <view class="tickets_head" v-if="item.tickets_url!=undefined" @tap="handleToViewTickets(item)">
            <text>平台分享双色球，点击查看是否中奖</text>
        </view>
          <text>实付金额：</text>
          <text class="price" >¥ {{ (item.price ) | changeSub }}</text>
        </view>
      </view>
      <view class="full-green" v-if="!isEmpty">
        <load-more :status="loadingStatus"></load-more>
      </view>
      <view v-else>
        <u-empty description="暂无订单～"></u-empty>
      </view>
    </view>

  </view>
</template>

<script>
import { orderIcon } from '@/tool/static-img';
import loadMore from '@/components/load-more.vue';
import uEmpty from '@/basic-components/u-empty/index.vue';
import uTabs from '@/basic-components/u-tabs/index.vue';
import { ENUM_ORDER_TYPE } from '@/untils/constants'
import { momentDate, copyFunc } from '@/tool';
import moreLoadMixins from '@/common/load-more';

import { ORDER_LIST } from '@/api/order';

export default {
  components: {
    loadMore,
    uEmpty,
    uTabs
  },
  mixins: [moreLoadMixins],
  data() {
    return {
      orderIcon,
      name: '',
      // tab切换
      current: 0,
      classOrderList: [{
        name: '全部'
      },{
        name: '待付款'
      },{
        name: '待发货'
      },{
        name: '待收货'
      },{
        name: '已取消'
      }]

    };
  },
  async onLoad(option) {
    const { current = 0 }=option;
    this.current = current;
    
  },
  //先屏蔽onShow时定时刷新 将onShow->onShow1
  onShow() {
    console.log('onshow');
    // 列表信息
    this.initData();
    //setTimeout(() => {
      //this.resetInit();
    //},500)
  },
  //先屏蔽 onPullDownRefresh ->onPullDownRefresh1
  onPullDownRefresh() {
    // 初始化
    console.log('onPullDownRefresh');
    this.resetInit();
    uni.stopPullDownRefresh();
  },
  filters: {
    statusValueFilter(val) {
      const statusObj = {
          0: '待付款',
          1: '待发货',
          2: '待收货',
          3: '已完成',
          4: '已取消',
          10: '已发货',
          20: '已签收',
          30: '已退款'
        }

      return statusObj[val]
    }
  },
  methods: {
    handleSearch(e) {
      // 搜索
      this.name = e.detail.value;
    },
    handleConfirm() {
      // 确认搜索
      this.resetInit();
    },
    handleToDetail(item) {
      this.$navigate({
        page: 'orderDetail',
        params: {
          id: item.id,
        },
      });
    },
    handleToViewTickets(item){
      let imgCoverList= []
      imgCoverList.push(item.tickets_url);
        uni.previewImage({
          current: 0,
          urls: imgCoverList,
        });
    },
    handleTabChange(index) {
      if(this.current === index) {
        return
      }
      this.current = index;
      console.log('handleTabChange');
      this.resetInit();
      
    },
    initData() {
      
      // 列表搜索
      const params = {
        page: this.pages.currentPage,
        per_page: this.pages.perPage,
        order_type: ENUM_ORDER_TYPE.TYPE_SHOPPING_MALL,
        
      };
      if(this.current) {
         const statusInt = {
           1: 0,
           2: 1,
           3: 10,
           4: 4
         }
         params.status = statusInt[this.current];
      }
      if (this.name) {
        params.item_name = this.name;
      }
      return this.$http.get(ORDER_LIST, params).then(res => {
        const { data, last_page, current_page, total } = res;
        if (data && data.length) {
          data.forEach(item => {
            item.created_at = momentDate(item.created_at, 'YYYY-MM-DD HH:mm');
            item.item_thumb = item.item_list[0].item_pic.split(',')[0];
          })

          this.items = this.items.concat(data);
          // this.pages.currentPage=current_page+1;
        }
        return {
          perPage: this.pages.perPage,
          currentPage: this.pages.currentPage,
          hasNext: !last_page === current_page,
          empty: current_page === 1 && total === 0,
        };
      });
    },
  },
};
</script>

<style lang="less">
.order-wrap {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 182rpx;
    padding-top: 24rpx;
    background: #fff;
  }
  .create_time{
    margin-right: 50rpx;
  }
  .search {
    display: flex;
    align-items: center;
    width: 682rpx;
    height: 64rpx;
    margin-bottom: 12rpx;
    padding: 0 30rpx;
    background: #f5f5f5;
    border-radius: 1000rpx;

    &__icon {
      font-size: 30rpx;
      margin-top: -4rpx;
      margin-right: 12rpx;
    }

    &__input {
      flex: 1;
      align-items: center;
      height: 100%;
      padding: 10rpx 0;
      box-sizing: content-box;
    }
  }
  .tab-box{
    width: 100%;
    background-color: #FFFFFF;
  }
  .list {
    display: flex;
    flex-direction: column;
    padding-top: 200rpx;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    .item {
      position: relative;
      width: 710rpx;
      padding: 24rpx 24rpx 34rpx 24rpx;
      margin: auto;
      margin-bottom: 20rpx;
      background-color: #ffffff;
      border-radius: 16rpx;
      .merber {
        display: flex;
        &__img {
          flex-shrink: 0;
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          margin-right: 16rpx;
        }
        &__desc {
          flex: 1;
          display: flex;
          .name {
            font-size: 30rpx;
          }
        }
        .status{
          font-size: 28rpx;
          flex-shrink: 0;
          margin-right: 10rpx;
          color: #FF6034;
        }
      }
      .title {
        font-size: 32rpx;
        font-weight: 500;
        padding: 20rpx 0;
      }
      .info {
        display: flex;
        padding: 20rpx 0;
        border-bottom: 1px solid #f5f5f5;
        &__img {
          flex-shrink: 0;
          width: 180rpx;
          height: 180rpx;
          margin-right: 20rpx;
          border-radius: 8rpx;
        }
        &__desc{
          flex: 1;
          .name{
            height: 96rpx;
            font-size: 32rpx;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .sku{
            font-size: 24rpx;
            color: #999999;
          }
          .price{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding-top: 20rpx;
            font-size: 26rpx;
          }
        }
      }
      .tickets_head{
            float: left;
          width: 67%;
          color: red;
      }
      .count-line {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 28rpx;
        width:100%;
        .price {
          font-size: 28rpx;
          font-weight: 500;
          color: #ff0000;
        }
      }
    }
  }
}
</style>
